<template>
    <div>
    <div class="banner" @click="handleBannerClick">
        <img class="banner-img" :src="bannerImg">

        <div class="banner-info">
            <div class="banner-title">{{this.sightName}}</div>
            <div class="banner-number"><span class="iconfont banner-icon">&#xe796;</span>{{this.bannerImgs.length}}</div>
        </div>
    </div>
    <fade-animation>
    <common-gallary  :imgs="bannerImgs" 
    v-show="showGallary"
    @close="handleGallaryClose"
    ></common-gallary>
</fade-animation>
</div>
</template>
<script>
     import CommonGallary from 'common/gallary/Gallary.vue'
     import FadeAnimation from 'common/fade/Fade.vue'

    export default {
       name: 'DetailBanner',
       props: {
           sightName: String,
           bannerImg: String,
           bannerImgs: Array
       },
       data () {
             return {
                showGallary: false
               
             }
       },
       methods: {
    handleBannerClick () {
        this.showGallary = true
    },
    handleGallaryClose () {
        this.showGallary = false
    }
       },
       components: {
        CommonGallary,
        FadeAnimation
       }

    }
</script>
<style scoped>
    .banner {
        /*防止抖动*/
        position: relative;
        overflow: hidden;
        height: 0;
        padding-bottom: 55%;
    }

    .banner-img {
        width: 100%;
    }

    .banner-info {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: .6rem;
        color: #EEB422;
        background-image: linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,.8))
    }

    .banner-title {
        flex: 1;
        font-size: .32rem;
        padding: 0 .2rem;
        letter-spacing: .08rem;
    }

    .banner-number {
        margin-top: .14rem;
        padding: 0 .4rem;
        line-height: .32rem;
        height: .32rem;
        border-radius: .2rem;
        background: rgba(0,0,0,.8);
        font-size: .34rem;
    }

    .banner-icon {

    }
</style>